<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<view class="status_bar" :style="'height:'+tophight.top+'px;'"></view>
		<view class="status_title" :style="'height:'+tophight.height+'px;'">
			<view @click="onBack()">
				<image class="back-image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/9/99510d9b-3884-4562-8fe4-4c0f4f40cad5.png"></image>
			</view>
			<text>体质检测</text>
		</view>
		<!-- #endif -->
		<view class="head-view">
			<view class="title">体质检测根据《中国体质分类与判定》基础上仅12道题快速分析用户体质，并在原有9种体质基础上加入兼夹体质</view>
		</view>
		<view class="banner">
			<view class="b-left">
				<view class="item">
					<view class="topic">测体质</view>
					<view class="dec">了解自己的中医体质</view>
				</view>
				<view class="icon-down">
					<image class="image" src="../static/image/down.png" mode=""></image>
				</view>
				<view class="item">
					<view class="topic">防疾病</view>
					<view class="dec">明确体质可以预防的疾病</view>
				</view>
				<view class="icon-down">
					<image class="image" src="../static/image/down.png" mode=""></image>
				</view>
				<view class="item">
					<view class="topic">养生调理</view>
					<view class="dec">调理改善体质偏颇失衡</view>
				</view>
			</view>
			<view class="b-right">
				<image class="body-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/39edadcb-03f7-49f1-8336-7f9a0c42560f.png"></image>
			</view>
			<view class="check-view" @click="toCheckRecord">
				检测记录
			</view>
		</view>
		<view class="footer-view">
			<image class="btn" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/1f02b947-675a-44cb-be32-b1ad602fe959.png" @click="onCheck()"></image>
			<view class="tip">本次测评共计12道题，预计需要1分钟</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tophight:{}
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			this.tophight = uni.getMenuButtonBoundingClientRect()
			// #endif
		},
		methods:{
			onBack(){
				uni.navigateBack(-1)
			},
			onCheck(){
				uni.navigateTo({
					url:'../../packagesAiPhoto/aiPhoto/bTopic'
				})
			},
			toCheckRecord(){
				uni.navigateTo({
					url:'../../packagesAiPhoto/aiPhoto/bRecord'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/0e3c0b58-f361-4c86-9115-cf839d056604.png');
		background-size: cover;
		// background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		.status_title{
			position: relative;
			display: flex;
			color: #000;
			font-size: 36rpx;
			font-weight: bold;
			text{
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
			}
			.back-image{
				position: absolute;
				top: 0;
				left: 34rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}
		.head-view{
			display: flex;
			align-items: center;
			.title{
				font-size: 32rpx;
				font-weight: 700;
				padding: 0 40rpx;
				margin-top: 40rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}
		.banner{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 52rpx;
			margin-top: 140rpx;
			box-sizing: border-box;
			.b-left{
				display: flex;
				flex-direction: column;
				.item{
					.topic{
						font-size: 36rpx;
						font-weight: bold;
						margin-bottom: 6rpx;
					}
					.dec{
						font-size: 28rpx;
						font-weight: 400;
						color: #140F08B3;
					}
				}
				.icon-down{
					display: inline-block;
					margin: 30rpx 0 10rpx;
					.image{
						width: 48rpx;
						height: 48rpx;
					}	
				}
			}
			.b-right{
				.body-bg{
					width: 328rpx;
					height: 640rpx;
				}
			}
			.check-view{
				position: fixed;
				display: flex;
				align-items: center;
				right: 32rpx;
				bottom: 360rpx;
				font-size: 32rpx;
				color: #22262A;
				background: #fff;
				width: 90rpx;
				height: 90rpx;
				text-align: center;
				border-radius: 12rpx;
			}
		}
		.footer-view{
			position: fixed;
			bottom: 100rpx;
			left: 50%;
			transform: translateX(-50%);
			.btn{
				width: 620rpx;
				height: 96rpx;
			}
			.tip{
				text-align: center;
				font-size: 26rpx;
				color: #4E5155;
				margin-top: 36rpx;
			}
		}
		
	}
</style>